<template>
  <div>
    <pk-dialog title="创建邀请函" @confirm="confirm" @onClose="onClose" :footer="false" width="720">
      <el-form
        ref="ruleFormRef"
        style="max-width: 650px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item label="面试岗位:">
        {{ jobName }}
      </el-form-item>
      <el-form-item label="使用签名:" prop="count">
        {{counterStore?.userInfo.organization?.company?.company_name}}
      </el-form-item>
      <el-form-item label="面试时长:" prop="countdown">
       <div class="flex-row align-items-center justify-center">
        <div>
          <el-radio-group v-model="ruleForm.countdown">
            <el-radio :value="10">10分钟</el-radio>
            <el-radio :value="20">20分钟</el-radio>
            <el-radio :value="30">30分钟</el-radio>
            <!-- <el-radio :value="50">50分钟</el-radio> -->
          </el-radio-group> 
        </div>
        <div class="ml-12 flex-row" style="height:26px">
          <el-tooltip class="item" effect="dark" content="不同面试时长扣减点数不同，具体以官方通知为准" placement="top">
            <div><el-icon size="16"><Warning /></el-icon></div>
          </el-tooltip>
        </div>
       </div>
      </el-form-item>
      <el-form-item label="面试有效期:" prop="delay_days">
        <div class="flex-row align-items-center justify-center">
          <div>
            <el-select v-model="ruleForm.delay_days" placeholder="请选择面试有效期" style="width: 160px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="ml-12 flex-row" style="height:26px">
            <el-tooltip class="item" effect="dark" content="候选人接受面试后的面试链接有效期" placement="top">
              <div><el-icon size="16"><Warning /></el-icon></div>
            </el-tooltip>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="链接有效期:" prop="deadline">
        <div class="flex-row align-items-center justify-center">
          <div>
            <el-date-picker
              v-model="ruleForm.deadline"
              type="date"
              placeholder="链接有效期"
              style="width: 160px"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
            />
          </div>
          <div class="ml-12 flex-row" style="height:26px">
            <el-tooltip class="item" effect="dark" content="分享链接失效时间" placement="top">
              <div><el-icon size="16"><Warning /></el-icon></div>
            </el-tooltip>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="" >
        <div class="flex-row" style="margin-left: 100px;"><el-button type="primary" @click="confirm">点击生成链接</el-button></div>
      </el-form-item>
      <el-form-item label="" v-if="shareLink">
        <div class="page-share">
          <div class="page-share-shareLink">
            {{shareLink}}
          </div>
          <div class="flex-row flex-end">
            <el-button size="small" type="primary" @click="setCopy">复制</el-button>
          </div>
        </div> 
        <div class="f-12 red-color mt-12" style="line-height: 20px">
          <div>注意: </div>
          <div>1、链接失效后，不可点击，请确保分享出去的链接在有效期内；</div>
          <div>2、候选人通过点击此链接参加的面试，自动扣减账户点数，例如：一个人 
          点击链接，接受面试，则扣减1个点数，拒绝面试不扣减点数，且一个岗位下同  
          一个人只会扣减一次；</div>
          <div>3、账户点数不足时，候选人仍然可以点击链接但无法接受面试，请及时充值；</div> 
        </div>
      </el-form-item>
      </el-form>
    </pk-dialog>
  </div>
</template>

<script setup>
 import { Warning } from '@element-plus/icons-vue'
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import { reactive, ref, defineProps, computed, defineEmits } from 'vue'
import { useSideStore } from '@/store/state'
import { candidateInvite, createInvitation } from '@/api/api'
import { copyTextToClipboard } from '@/utils/utils'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
const counterStore = useSideStore()
const ruleFormRef = ref(null)
const shareLink = ref('')
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 86400000; // 直接比较是否小于当前时间戳，确保用户不能选择今天之前的日期
};
const props = defineProps({
  jobName: {
    type: String,
    default: ''
  },
  jobId: {
    type: [String, Number],
    default: ''
  }, 
  data: {
    type: Array,
    default: () => []
  },
  companyName: {
    type: String,
    default: ''
  }
})
const rules = reactive({
  notification_type: [
    {
      required: true,
      message: '请选择邀约方式',
      trigger: 'change',
    },
  ],
  delay_days: [
    {
      required: true,
      message: '面试有效期',
      trigger: 'change',
    },
  ],
  countdown: [
    {
      required: true,
      message: '面试时间没有选择',
      trigger: 'change',
    },
  ],
  deadline: [
    {
      type: 'date',
      required: true,
      message: '请选择链接有效期',
      trigger: 'change',
    },
  ]
})
const pageTotal = computed(() => {
  return counterStore?.userInfo?.organization?.employee?.quota - counterStore?.userInfo?.organization?.employee?.usage
})
const ruleForm = reactive({
  candidate_ids: [],
  notification_type: null,
  delay_days: null,
  countdown: null,
  deadline: null
})
const options = ref([
  {
    label: '1天',
    value: 1
  },
  {
    label: '3天',
    value: 3
  },
  {
    label: '5天',
    value: 5
  },
  {
    label: '7天',
    value: 7
  }
])

const setCopy = () => {
  copyTextToClipboard(shareLink.value)
}


const onClose = () => {
  emits('onClose')
}
const confirm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      createInvitation({
        job_id: props.jobId,
        delay_days: ruleForm.delay_days,
        countdown: ruleForm.countdown,
        deadline: parseInt(new Date(ruleForm.deadline).getTime() / 1000)
      }).then(res => {
        shareLink.value = res.data
        // emits('confirm')
      })
      console.log('submit!', valid)
    } 
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio{
  margin-right: 12px!important;
}
.page-form{
  &-querytotal{
    position: relative;
    span{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      right: -25px;
      margin-top:3px
    }
  }
}

.page-share{
  border:#ddd 1px solid;
  padding: 24px;
  width: 100%;
  border-radius: 12px;
  &-shareLink{
    word-break: break-all;
  }
}
</style>